<template>
    <div>
      <!-- title -->
      <van-nav-bar
        title="评价"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
      />
      <!-- cell-group -->
      <van-cell-group>
        <!-- text -->
        <h2 class="comment_text" v-show="manner">“满意”</h2>
        <h2 class="comment_text" v-show="!manner">“不满意”</h2>
  
        <!-- img -->
        <van-row justify="center">
          <van-col span="5"
            ><van-image
              width="1.3rem"
              height="1.3rem"
              @click="changeManner"
              src="@/../public/orderImg/540.svg"
          /></van-col>
          <van-col span="5"
            ><van-image
              width="1.3rem"
              height="1.3rem"
              fit="contain"
              position="cover"
              @click="changeManner2"
              src="@/../public/orderImg/541.svg"
          /></van-col>
        </van-row>
        <!--  comment -->
        <van-cell-group inset>
          <van-field
            v-model="message"
            rows="3"
            autosize
            type="textarea"
            maxlength="200"
            placeholder="请输入留言"
            show-word-limit
          />
        </van-cell-group>
      </van-cell-group>
  
      <!-- btn -->
      <van-cell-group class="btn">
        <van-button type="primary" block @click="submit">提交</van-button>
      </van-cell-group>
    </div>
  </template>
  
  <script setup>
  // hooks
  import { useOrderComment } from "@/hooks/order/useOrder.js";
  const {
    onClickLeft,
    manner,
    changeManner,
    changeManner2,
    message,
    submit,
    route,
  } = useOrderComment();
  </script>
  
  <style lang="scss" scoped>
  .van-cell-group {
    overflow: hidden;
    h2 {
      font-size: 0.6875rem;
    }
    .comment_text {
      text-align: center;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
    }
    .van-col {
      text-align: center;
    }
    .van-row {
      margin-bottom: 0.5rem;
    }
    .van-field {
      background-color: rgba(248, 248, 248, 1);
      margin-bottom: 0.5rem;
      max-height: 5rem;
    }
  }
  .btn {
    width: 100vw;
    position: absolute;
    bottom: 1.5rem;
    padding: 0.35rem;
    box-sizing: border-box;
  }
  </style>